import React from 'react'
import PropTypes from 'prop-types'
import { Col, Row } from 'antd'
import style from './wordCard.less'
import { transactionStatus, isThreeStatus } from '../../utils/seletLocalData'

const WordCard = ({ WordCardProps }) => {
  const result = WordCardProps.map((current, index) => {
    let statusText = ''
    switch (current.type) {
      case 'status':
        if (typeof current.status === 'undefined') {
          statusText = 'Create the order'
        } else {
          statusText = transactionStatus.map((currentValue) => {
            if (currentValue.key === current.status) {
              return currentValue.value
            }
          })
        }
        return (
          <div className={style.wordCard} key={index}>
            Status:&nbsp;<span className={style.word}>{statusText}</span>
          </div>
        )
      case 'isThree':
        if (typeof current.status === 'undefined') {
          statusText = 'Create the order'
        } else {
          statusText = isThreeStatus.map((currentValue) => {
            if (currentValue.key === current.status) {
              return currentValue.value
            }
          })
        }
        return (
          <div className={statusText==='yes'?style.wordYesCard:style.wordNoCard} key={index}>
            tripartite transaction:&nbsp;<span className={style.word}>{statusText}</span>
          </div>
        )
      default :
        break
    }
  })
  return (
    <div>
      {
        result
      }
    </div>
  )
}

WordCard.PropTypes = {
  WordCardProps: PropTypes.array,
}

export default WordCard
